<template>
  <div>
    <el-row>
      <el-col :span="14">精品列表</el-col>
      <el-col
        :span="10"
        align="right"
      >
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleDataInsert('新增精品')"
        >新增精品</el-button>
      </el-col>
    </el-row>
    <el-row>
      <data-table
        :value="jpList"
        :total-count="jpList.length"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        :localPage="true"
      >
        <template #allNum>
          <div class="tabelAomut">
            <div>
              项目总金额：<span>￥{{ toFixedTwo(totalAmoun) }}</span>
            </div>
            <div>
              项目优惠金额：<span>￥{{ discountedPrice }}</span>
            </div>
            <div>
              项目折后总金额：<span>￥{{ toFixedTwo(totalDiscountAmount) }}</span>
            </div>
          </div>
        </template>
        <template #action="{ row, index }">
          <i
            class="el-icon-delete"
            title="删除"
            style="color: red; margin-left: 20px; cursor: pointer"
            @click="delTabelData(index)"
          ></i>
        </template>
      </data-table>
    </el-row>
    <el-dialog
      v-if="visible"
      :title="dialogTitle"
      :visible.sync="visible"
      :append-to-body="true"
      :width="'1000px'"
      @close="dialogClose"
    >
      <SelectProductForm
        v-if="dialogTitle == '新增精品'"
        @select="changeListCheck"
      />
    </el-dialog>
  </div>
</template>
<script>
import DataTable from '@/components/DataTable'
import SelectProductForm from '@/components/CommonForm/SelectProductForm'
// import { getUserOrTem } from "@/utils/index";
export default {
  props: {
    list: {
      default: () => {
        return []
      },
    },
  },
  components: {
    DataTable,
    SelectProductForm,
  },
  data () {
    return {
      visible: false,
      dialogTitle: '',
      jpList: [], //项目列表
      workUserList: [], //班组或员工列表
      tableColumnAttributes: [
        { name: '精品编号', value: 'orderNo', type: 'text', width: 150 },
        { name: '精品名称', value: 'name', type: 'text', width: 200 },
        { name: '一级类别', value: 'appLargeIdOneValue', type: 'text' },
        { name: '二级类别', value: 'appLargeIdTwoValue', type: 'text' },
        { name: '供应商', value: 'supplierName', type: 'text', width: 200 },
        { name: '销售价', value: 'currentPrice', type: 'text' },
        { name: '数量', value: 'num', type: 'inputNumber' },
        {
          name: '折扣',
          value: 'discount',
          type: 'inputNumber',
          maxFiled: 10,
          minFiled: 10,
        },
        {
          name: '折后总价',
          value: 'shouldAmount',
          type: 'render',
          render: this.discountAmount,
        },
        {
          name: '收费类型',
          value: 'tollType',
          type: 'select',
          options: [
            { index: 1, id: '自费', value: '自费' },
            { index: 2, id: '免费保养', value: '免费保养' },
            { index: 3, id: '索赔', value: '索赔' },
            { index: 4, id: '返工', value: '返工' },
            { index: 5, id: '保险', value: '保险' },
          ],
        },
        { name: '备注', value: 'remark', type: 'input' },
      ],
      totalAmount: 0, //总金额
      totalDiscountAmount: 0, //折后总金额
    }
  },
  watch: {
    jpList: {
      deep: true,
      handler (newValue, oldValue) {
        this.totalAmount = 0
        this.totalDiscountAmount = 0
        newValue.forEach((item, index) => {
          this.totalAmount += item.num ? item.num * item.currentPrice : 0
          this.totalDiscountAmount += Number(this.discountAmount(item))
          item.discountsAmount = item.amount - Number(this.discountAmount(item))
        })
        // this.totalAmount = this.totalAmount.toFixed(2)
        // this.totalDiscountAmount = this.totalDiscountAmount.toFixed(2)
        this.$emit('setTotalAmount')
      },
    },
    list: {
      deep: true,
      handler (nv, ov) {
        if (Array.isArray(nv) && nv.length > 0) {
          this.jpList = nv
        }
      },
    },
  },
  computed: {
    discountedPrice () {
      return (this.totalAmount - this.totalDiscountAmount).toFixed(2)
    },
  },
  methods: {
    //计算折扣
    discountAmount (row, value) {
      let sum = row.num ? row.num * row.currentPrice : 0,
        _amount = 0
      if (row.tollType && (row.tollType == '免单' || row.tollType == '返工')) {
        _amount = 0
      } else {
        _amount = sum
        if (row.discount > 0) {
          _amount = (sum * Number(row.discount / 10)).toFixed(2)
        }
      }
      return _amount
    },
    handleDataInsert (title) {
      this.visible = true
      this.dialogTitle = title
    },
    //表单删除
    delTabelData (index) {
      this.jpList.splice(index, 1)
    },
    //弹窗选择
    changeListCheck (list) {
      list.map((element) => {
        this.$set(element, 'amount', element.currentPrice) //库存剩余字段  应要求  暂时写死
        this.$set(element, 'discount', element.discount || 10)
        this.$set(element, 'num', 1)
        this.$set(element, 'tollType', '自费')
        this.$set(element, 'appLargeIdOneValue', element.appLargeOne)
        this.$set(element, 'appLargeIdTwoValue', element.appLargeTwo)
        this.$set(element, 'boutiqueId', element.id)
        delete element.id
      })
      this.jpList = this.jpList.concat(list)
      this.dialogClose()
    },
    dialogClose () {
      this.visible = false
    },
    toFixedTwo(val){
      return val.toFixed(2)
    }
  },
  async created () {
    this.jpList = this.list
  },
}
</script>
<style lang="scss" scoped>
.greeColor {
  color: #85ce61;
}
</style>
